<template>
  <div class="content-info">
    <LabelTitle text="综合数据" :showImg="false"></LabelTitle>
    <div class="sq-box">
      <div class="zl-item-box">
        <p class="title">街道数据</p>
        <div class="zl-item">
          <div
            class="lz-item w25"
            v-for="(item, index) in list"
            :style="{ 'margin-top': index > 3 ? '15px' : '0' }"
            :key="index"
          >
            <p class="num">{{ item.dataItemValue || 0 }}</p>
            <p class="text">{{ item.dataItemLable }}</p>
          </div>
        </div>
      </div>
      <div class="zl-item-box qy">
        <p class="title">人口数据</p>
        <div class="zl-item">
          <div
            class="lz-item w25"
            v-for="(item, index) in list2"
            :style="{ 'margin-top': index > 3 ? '15px' : '0' }"
            :key="index"
          >
            <p class="num">{{ item.dataItemValue || 0 }}</p>
            <p class="text">{{ item.dataItemLable }}/万</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import LabelTitle from '@/components/labeltitle.vue';
const props = defineProps({
  allData: Object,
});

let list = ref([
  {
    title: '总面积/km²',
    num: '0',
  },
  {
    title: '社区/个',
    num: '0',
  },
  {
    title: '小区/个',
    num: '0',
  },
   {
    title: '网格/个',
    num: '0',
  },
]);

let list2 = ref([
  {
    title: '总人口/万',
    num: '0',
  },
  {
    title: '常住人口/万',
    num: '0',
  },
  {
    title: '流动人口/万',
    num: '0',
  },
  {
    title: '户籍人口/万',
    num: '0',
  },
]);

watch(
  () => props.allData,
  (newval) => {
    if (newval.dataList) {
      // list.value[0].num = newval.eventCnt;
      // list.value[1].num = newval.handleCnt;
      // list.value[2].num = newval.pendingCnt;
      list.value = newval.dataList.slice(0, 4);
      list2.value = newval.dataList.slice(4, 8);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.content-info {
  width: 100%;
}
.sq-box {
  width: 100%;
  height: 300px;
  margin-top: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  padding: 15px 15px;
  .zl-item-box {
    width: 100%;
    height: 130px;
    background: linear-gradient(180deg, #ddecff 0%, #ffffff 100%);
    border-radius: 12px;
    padding-top: 27px;
    &.qy {
      background: linear-gradient(180deg, #fef2dc 0%, #ffffff 100%);
    }
    &.xc {
      background: linear-gradient(180deg, #ddecff 0%, #ffffff 100%);
    }
    .title {
      width: 100%;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
    }
    .zl-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 18px;
      .lz-item {
        width: 33%;
        // height: 45px;
        text-align: center;
        border-right: 1px solid #dadcde;
        &.w25{
          width: 25%;
        }
        &:last-child {
          border-right: none;
        }
        .num {
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #2263bf;
        }
        .text {
          margin-top: 5px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
</style>
